function opacityLoop(obj,arrImg){

	var ul=tn(obj,'ul')[0];

	var ol=tn(obj,'ol')[0];

	var spans=tn(obj,'span');

	var ulis=null;

	var olis=null;

	var index=0;

	var flag=true;

	resetView();

	autoPlay();

	clickBtn();

	clearTime();


	function clearTime(){

		obj.onmouseenter=function(){

			clearInterval(obj.timer);

		}

		obj.onmouseleave=function(){

			autoPlay();

		}


	}


	function clickBtn(){


		spans[1].onclick=function(){

			toMove();


		}

		spans[0].onclick=function(){

			if(index==0){

				index=arrImg.length-1;
			}else{


				index--;
			}

			changeImg(index);


		}


	}

	function resetView(){


		var str1='';

		var str2='';

		for (var i = 0; i < arrImg.length; i++) {
			
			str1+='<li><a href=""><img src="'+arrImg[i]+'" alt="" /></a></li>';

			if(i==0){

				str2+='<li class="active">'+(i+1)+'</li>';

			}else if(i==arrImg.length-1){

				str2+='<li style="margin-right:0;">'+(i+1)+'</li>';

			}else{

				str2+='<li>'+(i+1)+'</li>';


			}


		}

		ul.innerHTML=str1;

		ol.innerHTML=str2;


		ulis=tn(ul,'li');

		olis=tn(ol,'li');

		ulis[0].style.cssText="opacity:1;z-index:1;filter:alpha(opacity=100)";

		ol.style.left=(obj.offsetWidth-ol.offsetWidth)/2+'px';



	}

	function autoPlay(){

		obj.timer=setInterval(toMove,3000);

	}

	function toMove(){

		index++;

		index%=arrImg.length;

		changeImg(index);


	}

	function changeImg(a){

		for (var i = 0; i < ulis.length; i++) {
			
			if(i==a){

				ulis[i].style.cssText="z-index:1;";

				olis[i].className='active';

				move(ulis[i],'opacity',1);

			}else{

				ulis[i].style.cssText="opacity:0;z-index:0;filter:alpha(opacity=0)";
			
				olis[i].className='';
			}

		}


	}



}

function tn(parent,tName){

	return parent.getElementsByTagName(tName);


}

function cn(parent,className){


	return parent.getElementsByClassName(className);

}

function clearCn(arr){

	for (var i = 0; i < arr.length; i++) {
		
		arr[i].className='';


	}


}

function  move(obj,attr,target,fn){

			clearInterval(obj.timer);

			var iNow=0;

			var iSpeed=0;

			obj.timer=setInterval(function(){

				if(attr=='opacity'){

					//getStyle(obj,attr)*100

					iNow=parseInt(getStyle(obj,attr)*100);

					iSpeed=(target*100-iNow)/20;

				}else{

					iNow=parseInt(getStyle(obj,attr));

					iSpeed=(target-iNow)/7;


				}

				


				//0-1  -1-0

				if(iSpeed>0&&iSpeed<1){

					iSpeed=1;
				}

				if(iSpeed>-1&&iSpeed<0){


					iSpeed=-1;
				}


				if(iNow==target||iNow==target*100){


					clearInterval(obj.timer);

					// if(fn){

					// 	fn();

					// }

					fn&&fn.call(obj);

					console.log(iNow);

				}else{

					if(attr=='opacity'){

						obj.style[attr]=(iNow+iSpeed)/100;

						obj.style.filter="alpha(opacity="+(iNow+iSpeed)+")";

					}else{

						obj.style[attr]=iNow+iSpeed+'px';

					}

					

				}



			},13)

		}


		function getStyle(obj,attr){

			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];


		}